<template>
    <div>
        <!--1， 选中2个表-->
        <div>
            <h3 style="font-weight: 600;font-size: 16px;margin-bottom: 10px;">请选择2个表格</h3>
            <div style="display: flex;align-items: center;margin-bottom: 4px;">
                <span>左为主要</span>
                <tableSelect
                        v-model="formData.sourceTableId"
                        :text.sync="formData.sourceTableName"
                ></tableSelect>
            </div>
            <div style="display: flex;align-items: center">
                <span>右为映射</span>
                <tableSelect
                        v-model="formData.targetTableId"
                        :text.sync="formData.targetTableName"
                        style="margin-right:10px;"
                ></tableSelect>
                <el-button plain type="primary" size="mini"
                           @click="()=>triggerGenerateTable()"
                >同步
                </el-button>
            </div>
        </div>
        <!--2 左边表出来列表
         2.1 右边表字段自动填充映射
        -->
        <div style="margin-top: 10px;margin-bottom: 10px;">
            <el-button @click="triggerCode" size="mini" type="primary" plain>生成代码</el-button>
        </div>
        <el-table :data="dataList" border size="mini">
            <el-table-column
                    label="表格字段" prop="sourceFiledName" min-width="120px;">
                <template slot-scope="scope">
                    <tip-content v-model="scope.row.sourceFiledName" :overflow="1"></tip-content>
                </template>
            </el-table-column>
            <el-table-column
                    label="转换字段" prop="targetFiledName" min-width="120px;">
                <template slot-scope="scope">
                    <selectFields
                            :gTableId="formData.targetTableId"
                            :text.sync="scope.row.targetFiledName"
                    ></selectFields>
                </template>
            </el-table-column>
        </el-table>
        
        <!--3 生产代码
         public Table2 table1ToTable2(Table1 table1){
           var target=new Table2();
           target.setXXX(table1.getXXX());
           return target;
         }
        -->
        <div v-if="codeStr" style="margin-top: 10px;">
            <div style="padding-bottom: 10px;">预览</div>
            <pre v-text="codeStr"></pre>
        </div>
    </div>
</template>
<script>
  import * as  gTableFeildApi from '@/apis/gTableFeild.api.js';
  
  
  function firstUp(str) {
    const capitalized = (str && str.charAt(0).toUpperCase()) + (str && str.slice(1));
    return capitalized;
  }
  
  
  function toCamel(str) {
    return str && str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) {
      return $1 + $2.toUpperCase();
    });
  }
  
  export default {
    data() {
      return {
        formData: {
          sourceTableId: '',
          sourceTableName: '',
          targetTableId: '',
          targetTableName: '',
        },
        codeStr: '',
        /**
         *  {
         *    sourceFiledName:"",
         *    targetFiledName:"",
         *  }
         * */
        dataList: [],
      };
    },
    components: {
      tipContent: () => import('@/components/tipcontent/index.vue'),
      tableSelect: () => import('@/views/gCode/tableSelect.vue'),
      selectFields: () => import('@/views/gCode/selectFields.vue'),
    },
    methods: {
      initByDialog() {
      
      
      },
      /**
       * @description: 左边表出来列表
       *   右边表字段自动填充映射
       * @params
       * @return
       */
      async triggerGenerateTable() {
        var dataList = [];
        var result = await gTableFeildApi.getList({
          gTableId: this.formData.sourceTableId,
          pageNum: 1,
          pageSize: 100,
        });
        var sourceFiledList = result && result.data || [];
        
        
        var result2 = await gTableFeildApi.getList({
          gTableId: this.formData.targetTableId,
          pageNum: 1,
          pageSize: 100,
        });
        var targetFiledList = result2 && result2.data || [];
        
        
        // region  默认填充 目标字段
        for (let i = 0; i < sourceFiledList.length; i++) {
          var likeFiledOnes = targetFiledList.filter(item => item.filedName == sourceFiledList[i].filedName);
          var likeFiledOne = likeFiledOnes && likeFiledOnes[0];
          sourceFiledList[i].targetFiledName = likeFiledOne && likeFiledOne.filedName;
          sourceFiledList[i].sourceFiledName = sourceFiledList[i].filedName;
          
        }
        // endregion
        
        this.dataList = sourceFiledList;
        
        console.log('conver ing ', sourceFiledList);
        
      },
      triggerCode() {
        var setStrs = '';
        for (let i = 0; i < this.dataList.length; i++) {
          var one = this.dataList[i];
          var str = `target.set${firstUp(toCamel(one.targetFiledName))}(source.get${firstUp(toCamel(one.sourceFiledName))}());\n\t`;
          setStrs += str;
        }
        var codeStr = `
          public ${firstUp(toCamel(this.formData.targetTableName))} ${toCamel(this.formData.sourceTableName)}To${firstUp(toCamel(this.formData.targetTableName))}(${firstUp(toCamel(this.formData.targetTableName))} source){
           var target=new ${firstUp(toCamel(this.formData.targetTableName))}();
           ${setStrs}
           return target;
         }
        `;
        this.codeStr = codeStr;
      },
      
    },
  };
</script>
